<template>
  <q-page :padding="!$q.platform.is.mobile">
    <q-inner-loading visible v-if="list.length == 0">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading>

    <q-list v-scroll="scrolled" separator sparse :no-border="$q.platform.is.mobile" class="q-mb-lg" 
            v-if="favList.length > 0">
      <q-list-header class="item-header">我的关注</q-list-header>
      <q-item class="relative-position" 
            v-for="item in favList" :key="'event_'+item.id" 
            :to="computeDest(item)">
        <q-item-side>
          <q-item-tile class="relative-position">
            <q-chip detail small square icon="mdi-calendar-clock">
              {{item.date.substring(5).replace('-', '月')+'日'}}
            </q-chip>
            <q-chip floating v-if="item.days>=0" 
                :color="item.days>0?'green':'primary'">
              {{item.days == 0 ? '今' : Math.abs(item.days)}}
            </q-chip>
          </q-item-tile>
          <q-item-tile>
            <q-chip detail small square icon="mdi-city">{{item.city}}</q-chip>
          </q-item-tile>
          <q-item-tile>
            <q-chip v-if="item.step==1" color="blue-3" detail small square icon="mdi-numeric-1-box-multiple-outline">报名中</q-chip>
            <q-chip v-if="item.step==2" color="blue-4" detail small square icon="mdi-numeric-2-box-multiple-outline">筛选中</q-chip>
            <q-chip v-if="item.step==3" color="blue-5" detail small square icon="mdi-numeric-3-box-multiple-outline">签到中</q-chip>
            <q-chip v-if="item.step==4" color="blue-6" detail small square icon="mdi-numeric-4-box-multiple-outline">统计中</q-chip>
            <q-chip v-if="item.step==0" color="positive"  detail small square icon="mdi-check">已结束</q-chip>
            <q-chip v-if="item.step==-1"                  detail small square icon="mdi-alert">缺数据 </q-chip>
          </q-item-tile>
        </q-item-side>

        <q-item-main>
          <q-item-tile label lines="1" class="q-mb-md">
            <b v-if="item.name.indexOf('不散')>0" style="color:orange;">【不散】</b>
            {{item.movieName}}
          </q-item-tile>
          <q-item-tile sublabel lines="1">{{item.name}}</q-item-tile>
          <small><q-item-tile sublabel lines="1">{{item.place}}</q-item-tile></small>
        </q-item-main>
        <q-item-side right>
          <q-btn flat dense
              :color="item.fav?'primary':''"
              :icon="item.fav?'star':'star_border'" 
              @click.stop.prevent="fav(item)" />
        </q-item-side>
        <q-item-side right icon="mdi-chevron-right" />
        <q-chip floating v-if="item.userCount>0" class="text-right">
          <div><small><b class="text-blue">{{item.userCount}}</b>人报名</small></div>
          <div v-if="item.playerCount>0"><small><b class="text-primary">{{item.playerCount}}</b>人中奖</small></div>
          <div v-if="item.checkedCount>0"><small><b class="text-secondary">{{item.checkedCount}}</b>人签到</small></div>
        </q-chip>
      </q-item>
    </q-list>

    <q-list separator sparse :no-border="$q.platform.is.mobile">
      <q-list-header class="item-header">全部活动</q-list-header>
      <q-item style="padding:0;">
        <q-search icon="mdi-account-search" class="full-width no-shadow" :value="filter" 
            inverted-light color="grey-2"
          placeholder="搜索观影活动" autofocus="true"
          @input="filterEvent" @clear="filterEvent('')" clearable/>
      </q-item>
      <template v-if="filteredList.length > 0">
      <q-item class="relative-position" 
            v-for="item in filteredList" :key="'event_'+item.id" 
            :to="computeDest(item)">
        <q-item-side>
          <q-item-tile class="relative-position">
            <q-chip detail small square icon="mdi-calendar-clock">
              {{item.date.substring(5).replace('-', '月')+'日'}}
            </q-chip>
            <q-chip floating v-if="item.days>=0" 
                :color="item.days>0?'green':'primary'">
              {{item.days == 0 ? '今' : Math.abs(item.days)}}
            </q-chip>
          </q-item-tile>
          <q-item-tile>
            <q-chip detail small square icon="mdi-calendar-clock">{{item.time}}</q-chip>
          </q-item-tile>  
          <q-item-tile>
            <q-chip detail small square icon="mdi-city">{{item.city}}</q-chip>
          </q-item-tile>
          <q-item-tile>
            <q-chip v-if="item.step==1" color="blue-3" detail small square icon="mdi-numeric-1-box-multiple-outline">报名中</q-chip>
            <q-chip v-if="item.step==2" color="blue-4" detail small square icon="mdi-numeric-2-box-multiple-outline">筛选中</q-chip>
            <q-chip v-if="item.step==3" color="blue-5" detail small square icon="mdi-numeric-3-box-multiple-outline">签到中</q-chip>
            <q-chip v-if="item.step==4" color="blue-6" detail small square icon="mdi-numeric-4-box-multiple-outline">统计中</q-chip>
            <q-chip v-if="item.step==0" color="positive"  detail small square icon="mdi-check">已结束</q-chip>
            <q-chip v-if="item.step==-1"                  detail small square icon="mdi-alert">缺数据 </q-chip>
          </q-item-tile>
        </q-item-side>

        <q-item-main>
          <q-item-tile label lines="1" class="q-mb-md">
            <b v-if="item.name.indexOf('不散')>0" style="color:orange;">【不散】</b>
            {{item.movieName}}
          </q-item-tile>
          <q-item-tile sublabel lines="1">{{item.name}}</q-item-tile>
          <small><q-item-tile sublabel lines="1">{{item.place}}</q-item-tile></small>
        </q-item-main>
        <q-item-side right>
          <q-btn flat dense
              :color="item.fav?'primary':''"
              :icon="item.fav?'star':'star_border'" 
              @click.stop.prevent="fav(item)" />
        </q-item-side>
        <q-item-side right icon="mdi-chevron-right" />
        <q-chip floating v-if="item.userCount>0" class="text-right">
          <div><small><b class="text-blue">{{item.userCount}}</b>人报名</small></div>
          <div v-if="item.playerCount>0"><small><b class="text-primary">{{item.playerCount}}</b>人中奖</small></div>
          <div v-if="item.checkedCount>0"><small><b class="text-secondary">{{item.checkedCount}}</b>人签到</small></div>
        </q-chip>
      </q-item>
      </template>
      <q-item v-if="filteredList.length == 0">
        <q-item-main label>
            <q-btn color="primary" flat class="full-width" 
                label="没有符合条件的数据"  />
          </q-item-main>
      </q-item>
    </q-list>

    
    <q-btn v-if="hasMore" color="primary" flat class="full-width q-ma-md" 
                label="加载更多..." @click="loadData" :loading="loading" />
  </q-page>
</template>

<script>
export default {
  name: 'PageIndexEvent',
  data () {
    return {
      loading: false,
      hasMore: true,
      limit: 100,
      next: 0,
      list: [],
      currentIndex: 30,
      filter: ''
    }
  },
  mounted() {
    this.$api.ui.pageTitle = '豆瓣观影活动';
    this.loadData();
  },
  methods: {
    filterEvent(val) {
      this.filter = val;
    },
    scrolled: function() {
          this.currentIndex += 5;
      },
    fav(item) {
      item.fav = !item.fav;
      this.$api.party.favEvent(item.id, item.fav, res=>{});
    },
    computeDest(item) {
      let prefix = '/event/' + item.id;
      if(item.step == 0 || item.step == 4) {
        return prefix + '/summary';
      } else if(item.step == 1) {
        return prefix + '/sign';
      } else if(item.step == 3) {
        return prefix + '/check';
      } else {
        return prefix + '/play';
      }
    },
    loadData() {      
      let me = this;
      me.loading = true;
      if(me.next <= me.list.length) {
        this.$api.party.loadEvents(this.next, this.limit, res=>{
          let data = res.data;
          if(data.model.length < me.limit) {
            me.hasMore = false;
            data.model.forEach(item=>{
              me.list.push(item);
            });
          } else {
            me.hasMore = true;
            me.next = data.next;
            data.model.forEach(item=>{
              me.list.push(item);
            });
          }
          me.loading = false;
        })
      }
    }
  }, 
  computed: {
    favList() {
      return this.list.filter(function (item) {
        return item.fav;
      })
    },
    slicedList() {
          if(this.list.length < this.currentIndex) {
              return this.list;
          } else {
              return this.list.slice(0, this.currentIndex);
          }
      },
     filteredList() {
      let query = this.filter.toLowerCase();
      let filteredList = this.list.filter(function (item) {
        if(query.length>0) {
          let text = item.name + item.date;
          if(text.indexOf(query)>=0) {
            return true;
          }       
          return false;
        }
        return true;
      });
      if(filteredList.length < this.currentIndex) {
              return filteredList;
          } else {
              return filteredList.slice(0, this.currentIndex);
          }
    }
  }
}
</script>
